<template>
  <div class="myself">
    <div class="header">
      <div class="back" style="height:180px">
        <van-nav-bar left-text left-arrow @click-left="onClickLeft" />
      </div>
      <div class="card">
        <p class="name">{{userInfo.username}}</p>
        <p class="flag">可可喜欢家，家喜欢干净</p>
        <!--  -->
        <p class="status">{{userInfo.certificationStatus}}</p>
      </div>
      <div class="JPG">
        <img
          :src="userInfo.userFace != '' ? userInfo.userFace :photourl"
          width="100%"
          height="100%"
        />
      </div>
    </div>
    <div class="show" align="center">
      <p>手机号：{{userInfo.telephone}}</p>
      <p>身份证号：1235</p>
      <p>银行卡号：12526356</p>
    </div>
    <div class="photoshow" align="center" style="margin-bottom:100px">
      <div>
        身份证正面照：
        <div>
          <img
            :src="userInfo.idcardPhotoPositive != '' ? userInfo.idcardPhotoPositive :photourl"
            alt
            width="300px"
            height="300px"
          />
        </div>
      </div>
      <div>
        身份证反面照：
        <div>
          <img
            :src="userInfo.idcardPhotoNegative != '' ? userInfo.idcardPhotoNegative :photourl"
            alt
            width="300px"
            height="300px"
          />
        </div>
      </div>
      <div>
        银行卡照：
        <div>
          <img
            :src="userInfo.bankCardPhoto != '' ? userInfo.bankCardPhoto :photourl"
            alt
            width="300px"
            height="300px"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      photourl:
        "http://121.199.29.84:8888/group1/M00/00/50/rBD-SWDixYOASajcAAAteDVkRqQ289.jpg",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    //返回
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getUserInfo();
  },
  mounted() {},
};
</script>
<style scoped>
.div,
.div,
.van-nav-bar {
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  height: 0;
}
::v-deep .van-icon-arrow-left {
  color: white;
}
div.show {
  margin-top: 90px;
  font-size: 14px;
}
div.back {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.card {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}
.JPG {
  margin-top: -95px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.JPG img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.name {
  width: 50%;
  margin: 0 auto;
  margin-top: 3.5em;
  text-align: center;
}
.status {
  width: 50%;
  margin: 0 auto;
  margin-top: 1em;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.flag {
  color: #7579ff;
  width: 50%;
  margin: 0 auto;
  margin-top: 0.5em;
  text-align: center;
  font-size: 12px;
}
</style>